<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.prime.com.tr/ui"
	xmlns:t="http://myfaces.apache.org/tomahawk">
	
<p:dialog header="Cadastrar cliente/fornecedor" widgetVar="dlgClienteFornecedor" modal="true"
	height="550" width="850" resizable="false">
	
	<h:form id="clienteFornecedorModalForm">
	
	<h:inputHidden id="cpfCnpjHidden" value="#{manterClientesFornecedoresBean.pessoa.cpfCnpj}" />
	<h:inputHidden id="cadastroDespachanteHidden" value="#{manterClientesFornecedoresBean.cadastroDespachante}" />
		
		<script type="text/javascript">

			jQuery(function(){
				
				if(jQuery('input[id*="cadastroDespachanteHidden"]').val() == 'true'){
					jQuery('input:checkbox[id*=despachanteModal]').attr('checked', 'checked');
				}else{
					jQuery('input:checkbox[id*=despachanteModal]').attr('checked', '');
				}
				
				atualizar();
			
				jQuery('input[name*=tipoPessoaModal]').change(function () { 
					atualizar();
				});
				
				jQuery('label[for*="tipoPessoaModal"]').css("font-weight", "normal");
				jQuery('label[id*="labelTipoPessoaModal"]').css("font-weight", "bold");
				
				jQuery('label[for*="indSexoModal"]').css("font-weight", "normal");
				jQuery('label[id*="labelIndSexoModal"]').css("font-weight", "bold");
				
				jQuery('label[for*="despachanteModal"]').css("font-weight", "normal");
				
			});
			
			function atualizar(){
				var valorTipoPessoa = jQuery('input:radio[name*=tipoPessoaModal]:checked').val();
				
				if(valorTipoPessoa == 'F'){
					jQuery('label[id*="labelNomeModal"]').show();
					jQuery('label[id*="labelCpfModal"]').show();
					jQuery('input[id*="cpfModal"]').show();
					jQuery('td[id*="tdIdentidadeModal"]').show();
					jQuery('tr[id*="trEstadoCivilSexoModal"]').show();
					
					jQuery('label[id*="labelRazaoSocialModal"]').hide();
					jQuery('label[id*="labelCnpjModal"]').hide();
					jQuery('input[id*="cnpjModal"]').hide();
					jQuery('td[id*="tdNomeFantasiaModal"]').hide();
					jQuery('td[id*="tdInscricaoEstadualModal"]').hide();
					jQuery('td[id*="tdInscricaoMunicipalModal"]').hide();
					
					limparJuridica();
				}else{
					jQuery('label[id*="labelRazaoSocialModal"]').show();
					jQuery('td[id*="tdNomeFantasiaModal"]').show();
					jQuery('label[id*="labelCnpjModal"]').show();
					jQuery('input[id*="cnpjModal"]').show();
					jQuery('td[id*="tdInscricaoEstadualModal"]').show();
					jQuery('td[id*="tdInscricaoMunicipalModal"]').show();
					
					jQuery('label[id*="labelNomeModal"]').hide();
					jQuery('label[id*="labelCpfModal"]').hide();
					jQuery('input[id*="cpfModal"]').hide();
					jQuery('td[id*="tdIdentidadeModal"]').hide();
					jQuery('tr[id*="trEstadoCivilSexoModal"]').hide();
					
					limparFisica();
				}
			}
			
			function limparFisica(){
				jQuery('input[id*="cpfCnpjHidden"]').attr("value", "");
				jQuery('input[id*="cpfModal"]').attr("value", "");
				jQuery('input[id*="identidadeModal"]').attr("value", "");
				jQuery('input[id*="estadoCivilModal"]').attr("value", "");
				jQuery('input:radio[name*=indSexoModal]').attr("value", "");
				jQuery('input:radio[name*=indSexoModal]').attr("checked", "");
				jQuery('select[id*=estadoCivilModal]').attr("value", "");
			}
			
			function limparJuridica(){
				jQuery('input[id*="cpfCnpjHidden"]').attr("value", "");
				jQuery('input[id*="cnpjModal"]').attr("value", "");
				jQuery('input[id*="inscricaoEstadualModal"]').attr("value", "");
				jQuery('input[id*="inscricaoMunicipalModal"]').attr("value", "");
			}
			
		</script>
	
	<p:panel id="panelClienteFornecedorModal" style="height:455px; overflow:auto;">

		<table cellspacing="10">
			<tr>
				<td width="250px;">
					<h:outputLabel id="labelTipoPessoaModal" for="tipoPessoaModal" 
						value="* Tipo" style="font-weight: bold;" />
					<br />
					<h:selectOneRadio id="tipoPessoaModal" 
							value="#{manterClientesFornecedoresBean.pessoa.tipoPessoa}">
						<f:selectItem id="fisica" itemLabel="Física" itemValue="F" />
						<f:selectItem id="juridica" itemLabel="Jurídica" itemValue="J" />
						<f:ajax event="change" render="panelTabView" />
					</h:selectOneRadio>
	            </td>
				<td width="250px;">
					<h:selectBooleanCheckbox
						title="emailUpdates" id="despachanteModal"
						value="#{manterClientesFornecedoresBean.pessoa.despachante}" />
					<h:outputLabel for="despachanteModal" value=" Despachante" />
	            </td>
			</tr>
			<tr>
				<td width="250px;">
					<h:outputLabel id="labelNomeModal" for="nome" value="* Nome:" style="font-weight: bold;" />
					<h:outputLabel id="labelRazaoSocialModal" for="nome" value="* Razão social:" style="font-weight: bold;" />
					<br />
					<p:inputText id="nome" value="#{manterClientesFornecedoresBean.pessoa.nmPessoa}" 
						maxlength="150" style="width:200px;" />
	            </td>
	            <td width="250px;" id="tdNomeFantasiaModal">
					<h:outputLabel for="nomeFantasia" value="Nome fantasia:" style="font-weight: bold;" />
					<br />
					<p:inputText id="nomeFantasia" value="#{manterClientesFornecedoresBean.pessoa.nmFantasiaEmpresa}" 
						maxlength="150" style="width:200px;" />
	            </td>
			</tr>
			<tr>
				<td width="250px;">
					<h:outputLabel id="labelCpfModal" for="cpfModal" value="* CPF:" style="font-weight: bold;" />
					<h:outputLabel id="labelCnpjModal" for="cnpjModal" value="* CNPJ:" style="font-weight: bold;" />
					<br />
					<p:inputMask id="cpfModal" value="#{manterClientesFornecedoresBean.pessoa.cpf}" 
						mask="999.999.999-99" style="width:110px;" />
					<p:inputMask id="cnpjModal" value="#{manterClientesFornecedoresBean.pessoa.cnpj}" 
						mask="99.999.999/9999-99" style="width:140px;" />
	            </td>
	            <td width="250px;" id="tdIdentidadeModal">
					<h:outputLabel for="identidadeModal" value="RG:" style="font-weight: bold;" />
					<br />
					<p:inputText id="identidadeModal" value="#{manterClientesFornecedoresBean.pessoa.identidade}" 
						maxlength="20" style="width:200px;" />
	            </td>
	            <td width="250px;" id="tdInscricaoEstadualModal">
					<h:outputLabel for="inscricaoEstadualModal" value="Inscrição estadual:" style="font-weight: bold;" />
					<br />
					<p:inputText id="inscricaoEstadualModal" value="#{manterClientesFornecedoresBean.pessoa.inscricaoEstadualEmpresa}" 
						maxlength="15" style="width:200px;" />
	            </td>
	            <td width="250px;" id="tdInscricaoMunicipalModal">
					<h:outputLabel for="inscricaoMunicipalModal" value="Inscrição municipal:" style="font-weight: bold;" />
					<br />
					<p:inputText id="inscricaoMunicipalModal" value="#{manterClientesFornecedoresBean.pessoa.inscricaoMunicipalEmpresa}" 
						maxlength="15" style="width:200px;" />
	            </td>
			</tr>
			<tr id="trEstadoCivilSexoModal">
				<td width="250px;">
					<h:outputLabel for="estadoCivilModal" value="Estado civil:" style="font-weight: bold;" />
					<br />
					<h:selectOneMenu id="estadoCivilModal" style="width:130px;" label="Estado civil"
						styleClass="ui-inputfield ui-widget ui-state-default ui-corner-all"
							value="#{manterClientesFornecedoresBean.pessoa.estadoCivil}">
						    <f:selectItems value="#{manterClientesFornecedoresBean.todosEstadosCivis}" var="civil"
						    	itemValue="#{civil.value}" itemLabel="#{civil.label}"/>
					</h:selectOneMenu>
	            </td>
	            <td width="250px;">
					<h:outputLabel id="labelIndSexoModal" for="indSexoModal" value="Sexo:" style="font-weight: bold;" />
					<br />
					<h:selectOneRadio id="indSexoModal" 
							value="#{manterClientesFornecedoresBean.pessoa.indSexo}">
						<f:selectItem id="masculino" itemLabel="Masculino" itemValue="M" />
						<f:selectItem id="feminino" itemLabel="Feminino" itemValue="F" />
					</h:selectOneRadio>
	            </td>
			</tr>
		</table>
		<br />
		
		<p:panel id="panelTabView" style="border:0; padding:0;">
			<p:tabView>
				<p:tab title="Endereço">
					<table cellspacing="10">
						<tr>
							<td colspan="4">
								<h:outputLabel for="endereco" value="Endereço:" style="font-weight: bold;" />
								<br />
								<p:inputText id="endereco" value="#{manterClientesFornecedoresBean.pessoa.endereco.dscEndereco}" 
									maxlength="100" style="width:465px;" />
				            </td>
						</tr>
						<tr>
							<td width="334px;">
								<h:outputLabel for="cidade" value="Cidade:" style="font-weight: bold;" />
								<br />
								<p:inputText id="cidade" value="#{manterClientesFornecedoresBean.pessoa.endereco.cidade}" 
									maxlength="100" style="width:200px;" />
				            </td>
							<td width="334px;">
								<h:outputLabel for="uf" value="Estado:" style="font-weight: bold;" />
								<br />
								<h:selectOneMenu id="uf" style="width:130px;" label="Estado"
									styleClass="ui-inputfield ui-widget ui-state-default ui-corner-all"
										value="#{manterClientesFornecedoresBean.pessoa.endereco.estado}">
									    <f:selectItems value="#{manterClientesFornecedoresBean.todasUfs}" var="uf"
									    	itemValue="#{uf.value}" itemLabel="#{uf.label}"/>
								</h:selectOneMenu>
				            </td>
						</tr>
						<tr>
							<td>
								<h:outputLabel for="bairro" value="Bairro:" style="font-weight: bold;" />
								<br />
								<p:inputText id="bairro" value="#{manterClientesFornecedoresBean.pessoa.endereco.bairro}" 
									maxlength="100" style="width:200px;" />
				            </td>
							<td>
								<h:outputLabel for="cep" value="CEP:" style="font-weight: bold;" />
								<br />
								<p:inputMask id="cep" value="#{manterClientesFornecedoresBean.pessoa.endereco.cep}" 
									mask="99999-999" style="width:85px;" />
				            </td>
						</tr>
					</table>
				</p:tab>
				
				<p:tab title="Contato">
					<table cellspacing="10" width="100%">
						<tr>
							<td width="250px;">
								<h:outputLabel for="telefone" value="Telefone:" style="font-weight: bold;" />
								<br />
								<p:inputMask id="telefone" value="#{manterClientesFornecedoresBean.pessoa.meioComunicacao.nrTelefone}" 
									mask="(999) 9999-9999" style="width:120px;" />
				            </td>
							<td width="250px;">
								<h:outputLabel for="fax" value="Fax:" style="font-weight: bold;" />
								<br />
								<p:inputMask id="fax" value="#{manterClientesFornecedoresBean.pessoa.meioComunicacao.nrFax}" 
									mask="(999) 9999-9999" style="width:120px;" />
				            </td>
							<td width="250px;">
								<h:outputLabel for="celular" value="Celular:" style="font-weight: bold;" />
								<br />
								<p:inputMask id="celular" value="#{manterClientesFornecedoresBean.pessoa.meioComunicacao.nrCelular}" 
									mask="(999) 9999-9999" style="width:120px;" />
				            </td>
							<td width="250px;">
								<h:outputLabel for="email" value="Email:" style="font-weight: bold;" />
								<br />
								<p:inputText id="email" value="#{manterClientesFornecedoresBean.pessoa.meioComunicacao.email}" 
									maxlength="50" style="width:250px;" />
				            </td>
						</tr>
					</table>
				</p:tab>
				
				<p:tab rendered="#{manterClientesFornecedoresBean.pessoa.tipoPessoa == 'F'}" title="Profissão">
				<table cellspacing="10" width="100%">
					<tr>
						<td>
							<h:outputLabel for="profissao" value="Profissão:" style="font-weight: bold;" />
							<br />
							<p:inputText id="profissao" value="#{manterClientesFornecedoresBean.pessoa.profissao}" 
								maxlength="50" style="width:200px;" />
			            </td>
						<td>
							<h:outputLabel for="nomeEmpresa" value="Nome da empresa:" style="font-weight: bold;" />
							<br />
							<p:inputText id="nomeEmpresa" value="#{manterClientesFornecedoresBean.pessoa.nmEmpresa}" 
								maxlength="100" style="width:250px;" />
			            </td>
						<td>
							<h:outputLabel for="telefoneEmpresa" value="Telefone da empresa:" style="font-weight: bold;" />
							<br />
							<p:inputMask id="telefoneEmpresa" value="#{manterClientesFornecedoresBean.pessoa.telefoneEmpresa}" 
								mask="(999) 9999-9999" style="width:120px;" />
			            </td>
					</tr>
				</table>
			</p:tab>
			</p:tabView>
		</p:panel>
			
	</p:panel>
		
	<br />
	<div align="right">
		<p:commandButton id="botaoIncluir" value="Incluir" 
			update="msgSistema, clienteFornecedorModalForm, entradaVeicForm, lancamentoForm, venderVeiculosForm" 
			oncomplete="handleRetornoRequestClienteFornecedor(xhr, status, args)"
			actionListener="#{manterClientesFornecedoresBean.incluirClienteFornecedorModal}" 
			style="margin-left:5px;" />
		<p:commandButton value="Cancelar" onclick="dlgClienteFornecedor.hide();"
			type="button" style="margin-left:5px;" />
	</div>

	</h:form>
</p:dialog>
	
	<script type="text/javascript">
		function handleRetornoRequestClienteFornecedor(xhr, status, args) {
			if(!args.falhou) {
				dlgClienteFornecedor.hide();
			}
		}
	</script>

</html>